<div class="radio-input">
  <div class="container">
    <label>
      <input value="value-1" name="value-radio" checked="" id="value-1" type="radio">
      <div class="loader"></div>
    </label>
    <label>
      <input value="value-2" name="value-radio" id="value-2" type="radio">
      <div class="loader"></div>
    </label>
    <label>
      <input value="value-3" name="value-radio" id="value-3" type="radio">
      <div class="loader"></div>
    </label>
 </div>
</div>

<style>
/* From Uiverse.io by Tsiangana - Tags: futuristic, animated, futuristic-radio-buttons */
.radio-input label {
  position: relative;
  display: flex;
  border-radius: 99999px;
  margin: 8px;
  width: 3em;
  height: 3em;
  margin-top: -35px;
}

.radio-input input {
  position: absolute;
  border-radius: 50%;
  appearance: unset;
  inset: 0.95em;
  margin: 0;
  cursor: pointer;
  background-color: rgb(74, 156, 233);
  filter: drop-shadow(0 0 10px rgb(74, 156, 233));
}

.radio-input input:checked {
  transition: .9s linear;
  background-color: #fff;
  z-index: 500;
}

.radio-input .container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-input .container .loader {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 1px solid;
  position: absolute;
  bottom: -25px;
  left: 10.5px;
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
  z-index: -1;
  background: linear-gradient(315deg, #cacaca, #f0f0f0);
  box-shadow: -6px -6px 11px #c1c1c1,
             6px 6px 11px #ffffff;
}

#value-1[type='radio']:checked:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  top: 23px;
  animation: 2.2s  lua infinite ease-in-out;
  animation-timing-function: linear;
}

#value-2[type='radio']:checked:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(19, 219, 226, 0.719);
  border-radius: 50%;
  top: 23px;
  animation: 2.2s  lua infinite ease-in-out;
  animation-timing-function: linear;
}

#value-3[type='radio']:checked:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(29, 29, 23, 0.979);
  border-radius: 50%;
  top: 23px;
  animation: 2.2s lua  infinite ease-in-out;
  animation-timing-function: linear;
}

@keyframes lua {
  0% {
    z-index: 5;
  }

  50% {
    transform: translateX(1.5em) translateY(-2.5em);
  }

  100% {
    z-index: -5;
    background: none;
  }
}
</style>
